<template>
<view class="evaluate">
	<navigator hover-class="none" class="title" :url="'/pages/orders/estimate?product_id='+source.id">
		<view class="txt">评价({{ source.tol_level }})</view>
		<view class="count">好评度<text>{{ source.ratio }}</text></view>
	</navigator>
	<block v-if="elist.length">
		<view class="list">
			<view class="item" v-for="(item, idx) in elist" :key="idx">
				<view class="profile">
					<view class="user">
					<view :style="{ backgroundImage: 'url('+item.weixin_headimgurl+')' }"></view>
					<view>{{ item.weixin_name }}</view>					
					</view>
					<view class="level">
						<image :src="item.level >= i ? '/static/start_act.png' : '/static/start.png'" v-for="i in 5" :key="i"></image>
					</view>
				</view>
				<view class="content">{{ item.discuss }}</view>
				<view class="imgList">
					<image v-for="(img, index) in item.discussimg" @tap="previewImg(img)" :key="index" :src="img" mode="" @error="ImgErr(index)"></image>
				</view>
			</view>
		</view>		
	</block>
	<block v-else>
		<view class="nocomment">
			<image src="/static/noevalute.png"></image>
			<view>暂无评论</view>
			</view>
	</block>
	<navigator hover-class="none" :url="'/pages/orders/estimate?product_id='+source.id" class="more" v-if="elist.length">
		<view>查看全部评价</view>
	</navigator>
</view>	
</template>

<script>
	import { baseURL } from '@/common/utils/config'
	export default {
		props: {
			elist: {
				type:Array,
				required: true
			},
			source: Object
		},
		data () {
			return {
				ImgList: []
			}
		},
		methods: {
			previewImg (item) {
				uni.previewImage({
					current: item,
					indicator: 'number',
					urls: this.elist.discussimg
				})
			},
			ImgErr (e) {
				if (!this.elist.length) return
// 				this.elist.discussimg = this.elist.discussimg.map(item => {
// 					return item = this.baseURL + '/public/icons/errimg.png'
// 				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.evaluate {
	background-color:white;
	.title {
		margin: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: @height;
		.txt {
			font-size:@minSize;
			font-weight: 600;
			position: relative;
			padding-left: 20upx;
			&::after {
				content:'';
				position: absolute;
				top: 0;
				height: 100%;
				left: 0;
				transform: scaleY(.8);
				border-left: 8upx solid @red;
			}
		}
		.count { font-size: @minSize; & > text { color: @red; padding-left: 4upx;font-size:@minSize; } }
		.arrowRight(#666, 30upx, 0);
		.border-bottom;
	}
	.nocomment {
		height: 180upx;
		padding-bottom: 10upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		& > view {
			font-size: @minSize;
			color:@gray;
		}
		image {
			width: 150upx;
			height: 150upx;
			display: block;
		}
	}
	.list {
		.item {
			padding: 15upx 0;
		    &:not(:last-of-type) {
				.border-bottom;
			}
			.profile {
				display: flex;
				justify-content: space-between;
				align-items: center;
		        margin: 0 15px;							
				.user {
					display: flex;
					align-items: center;					
					& > view {
						font-size: @minSize;
						color:@gray;							
						&:first-of-type {
							width: 60upx;
							height: 60upx;
							border-radius: 50%;
							margin-right: 15upx;
							.combackground(contain, center,center);
						}						
					}
				}
				.level {
					display: flex;
					image {
						width: 20upx;
						height: 20upx;
						display: block;
						&:not(:last-of-type) {
							margin-right: 6upx;
						}
					}
				}
			}
			.content { margin: 0 15px; }
			.imgList {
				display: flex;
				flex-wrap: wrap;
				& > image {
					width: 136upx;
					height: 136upx;
					margin-left: 15px;
					margin-bottom: 10px;
				}
			}
		}
	}
	.more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
		position: relative;
		&::before, &::after {
			position: absolute;
			content: '';
			width:100%;
			border-top: 1px solid #f7f7f7;
			left: 0;
		}
		&::before {
			top: 0;
		}
		&::after {
			bottom: 0; 			
		}
		& > view {
			font-size: 22upx;
			border: 1px solid #f7f7f7;
			border-radius: 15px;
			padding: 10upx 20upx;
			font-weight: 600
		}
	}
}
</style>
